<template>

    <div>
        <p>
            <button @click="list" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa fa-refresh green"></i>
                刷新
            </button>
            &nbsp;

        </p>
        <pagination ref="pagination" v-bind:list="list"></pagination>
        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                        <th>id</th>

                        <th>相对路径</th>

                        <th>文件名</th>

                        <th>后缀</th>

                        <th>大小</th>

                        <th>用途</th>

            </tr>
            </thead>

            <tbody>
            <tr v-for="file in files">
                            <td>{{file.id}}</td>
                            <td>{{file.path}}</td>
                            <td>{{file.name}}</td>
                            <td>{{file.suffix}}</td>
                <td>{{$filters.formatFileSize(file.size)}}</td>
                            <td>{{$filters.optionKV(file_use,file.use)}}</td>
            </tr>
            </tbody>
        </table>
        <!-- /.span -->

    </div><!-- /.row -->


</template>


<script scope>
    import axios from 'axios';
    import {defineComponent, onMounted, ref} from 'vue';
    import Pagination from '@/components/pagination.vue';

    export default defineComponent({
        name: 'file',
        components:{
            Pagination
        },
        setup() {
            const files = ref();
            const pagination = ref({});
            const fileinfo=ref({});
                   const file_use=FILE_USE;
            const list = () => {
                Loading.show();
                axios.get("/file/admin/file/list", {
                    params: {
                        page: pagination.value.page,
                        size: pagination.value.size,
                    }
                }).then((response) => {
                    Loading.hide();
                    const data=response.data;
                    if (data.success){
                        files.value = data.content.list;
                        pagination.value.render(pagination.value.page,data.content.total);
                    }else {
                        Loading.hide();
                        Toast.warning(data.message);
                    }

                })
            };


            onMounted(() => {
                list();
            });

            return {
                list,
                pagination,
                fileinfo,
                files,
                file_use,
            }


        }
    });
</script>